<template>
    <div>
        <div class="lofinFormContainer">
            <el-form
                :model="ruleForm"
                status-icon
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
            >
                <el-form-item label="账号" prop="username">
                    <el-input type="username" v-model="ruleForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pass">
                    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button size="small" type="primary" @click="submitForm('ruleForm')">登录</el-button>
                    <el-button size="small" @click="resetForm('ruleForm')">重置</el-button>
                    <el-button size="small" @click="goindex">返回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>


<script>
export default {
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else {
                if (this.ruleForm.checkPass !== "") {
                    this.$refs.ruleForm.validateField("checkPass");
                }
                callback();
            }
        };
        var validateusername = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入账号"));
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                pass: "",
                username: ""
            },
            rules: {
                pass: [{ validator: validatePass, trigger: "blur" }],
                username: [{ validator: validateusername, trigger: "blur" }]
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.$ajax
                        .post("/login/", {
                            username: this.ruleForm.username,
                            password: this.ruleForm.pass
                        })
                        .then(res => {
                            // console.log(res.data);
                            window.localStorage.setItem(
                                "token",
                                res.data.token
                            );
                            this.$router.push({ name: "index" });
                        })
                        .catch(err => {
                            this.$notify({
                                message: "登录失败!"
                            });
                        });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        goindex() {
            this.$router.push({ name: "index" });
        }
    }
};
</script>


<style lang="scss" scoped>
.lofinFormContainer {
    width: 25%;
    margin: 54px auto;
    padding: 25px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>